<template>
  <div class="page community-map-page">
    <div class="task-list">
      <div class="task-item" v-if="ifBdggz !== '1'" @click="viewTask('swyw')">
        <div class="task-icon"></div>
        <div class="task-name">室外移网测速</div>
        <div class="task-percent"><span class="done">{{ taskPercent.ywswFinish }}</span> / <span class="total">{{ taskPercent.ywswAll }}</span></div>
      </div>
      <div class="task-item task-combine-item" v-if="ifBdggz !== '1'">
        <div class="task-item" @click="viewTask('lyyw')">
          <div class="task-icon"></div>
          <div class="task-name">楼宇移网测速</div>
          <div class="task-percent"><span class="done">{{ taskPercent.ywlyFinish }}</span> / <span class="total">{{ taskPercent.ywlyAll }}</span></div>
        </div>
        <div class="task-item" @click="viewTask('lyyw')">
          <div class="task-icon"></div>
          <div class="task-name">楼宇移网入户测速</div>
          <div class="task-percent"><span class="done">{{ taskPercent.ywlyRhFinish }}</span> / <span class="total">{{ taskPercent.ywlyRhAll }}</span></div>
        </div>
      </div>

      <div class="task-item" @click="viewTask('wysb')">
        <div class="task-icon"></div>
        <div class="task-name">末梢无源设备巡检</div>
        <div class="task-percent"><span class="done">{{ taskPercent.wysbFinish }}</span> / <span class="total">{{ taskPercent.wysbAll }}</span></div>
      </div>
      <!-- <div class="task-item disabled" @click="viewTask('wqdc')"> -->
      <div class="task-item"  @click="viewTask('wjdc')">
        <div class="task-icon"></div>
        <div class="task-name">问卷调查</div>
        <div class="task-percent"><span class="done">{{ taskPercent.wjdcFinish }}</span> / <span class="total">{{ taskPercent.wjdcAll > 0 ? taskPercent.wjdcAll : 1 }}</span></div>
      </div>
      <div class="task-item"  @click="viewTask('swly')" v-if="ifSwly === '2'">
        <div class="task-icon"></div>
        <div class="task-name">商务楼宇</div>
        <div class="task-percent"><span class="done">{{ taskPercent.swlyFinish }}</span> / <span class="total">{{ taskPercent.swlyAll }}</span></div>
      </div>
    </div>
    <div class="community-work-signature">
      <div v-if="!isResponsible">
        <div class="signature-btn disabled" >您当前非小区责任人</div>
      </div>
      <div v-else-if="communityInfo.state !== '2'">
        <div v-if="signed">
          <div class="signature-btn disabled" >当前小区工作已确认</div>
        </div>
        <div v-else>
          <div v-if="finishFlag" class="signature-btn" @click="confirmTask">小区工作完成确认</div>
          <div v-else class="signature-btn disabled" >小区工作未全部完成</div>
        </div>
      </div>
      <div v-else>
        <div class="signature-btn disabled">小区工作已确认</div>
      </div>
      <div class="signature-list">
        <div class="list-item" v-for="(signData, index) in signList.zigcs">
          <div class="item-post">智家工程师</div>
          <div class="item-name">{{ signData.userName }}</div>
          <div class="item-time">{{ signData.time }}</div>
          <div v-if="signData.signFlag" class="item-name" style="color: #0c85ff">已确认</div>
          <div v-else class="item-name" style="color: #a8071a">未确认</div>
        </div>
        <div class="list-item" v-for="(signData, index) in signList.khjl">
          <div class="item-post">客户经理</div>
          <div class="item-name">{{ signData.userName }}</div>
          <div class="item-time">{{ signData.time }}</div>
          <div v-if="signData.signFlag" class="item-name" style="color: #0c85ff">已确认</div>
          <div v-else class="item-name" style="color: #a8071a">未确认</div>
        </div>
        <div class="list-item" v-if="ifBdggz !== '1'" v-for="(signData, index) in signList.wlgcs">
          <div class="item-post">网络工程师</div>
          <div class="item-name">{{ signData.userName }}</div>
          <div class="item-time">{{ signData.time }}</div>
          <div v-if="signData.signFlag" class="item-name" style="color: #0c85ff">已确认</div>
          <div v-else class="item-name" style="color: #a8071a">未确认</div>
        </div>
      </div>
    </div>
    <img src="~@/assets/imgs/fkewm.jpg" alt="" style="width: 40%;margin-left: 30%"/>

    <van-dialog
      v-model="confirmShow"
      title="小区任务结束确认"
      show-cancel-button
      @cancel="confirmShow = false"
      @confirm="closeTask"
    >
      <div class="confirm-list">
        <div v-if="ifBdggz !== '1'" class="confirm-item">
          室外移网测速任务共 <span>{{ taskPercent.ywswAll }}</span> 项，其中 <span>{{ taskPercent.ywswUnFinish }}</span> 项未完成
        </div>
        <div v-if="ifBdggz !== '1'" class="confirm-item">
          楼宇移网测速任务共 <span>{{ taskPercent.ywlyAll }}</span> 项，其中 <span>{{ taskPercent.ywlyUnFinish }}</span> 项未完成
        </div>
        <div v-if="ifBdggz !== '1'" class="confirm-item">
          楼宇移网入户测速任务共 <span>{{ taskPercent.ywlyRhAll }}</span> 栋楼宇，其中 <span>{{ taskPercent.ywlyRhUnFinish }}</span> 栋楼宇未完成
        </div>
        <div class="confirm-item">
          末梢无源设备巡检任务共 <span>{{ taskPercent.wysbAll }}</span> 项，其中 <span>{{ taskPercent.wysbUnFinish }}</span> 项未完成
        </div>
        <div class="confirm-item">
          问卷调查要求完成 <span>1</span> 份，已完成 <span>{{ taskPercent.wjdcFinish }}</span> 份
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  communityTaskPercent,
  closeCommunityTask,
  discardVillagePosition,
  communityTaskSwlyPercent
} from '@/api/publicline/kdcs'
import { getCurrentLocation } from '@/utils/geo'
import { Toast } from 'vant';
import Vue from "vue";
import {USER_INFO} from "@/store/mutation-types";

export default {
  props: {
    communityInfo: Object
  },
  data() {
    return {
      signed: false,
      finishFlag: false,
      isResponsible: false,
      userId: '',
      confirmShow: false,
      taskPercent: {},
      taskSwly: [],
      signList: {
        zigcs: [],
        khjl: [],
        wlgcs: []
      }
    }
  },
  created() {
    const { communityId, ifBdggz, ifSwly } = this.$route.query;
    this.communityId = communityId;
    this.ifBdggz = ifBdggz
    this.ifSwly = ifSwly
    const userInfo = Vue.ls.get(USER_INFO)
    console.log(userInfo)
    this.userId = userInfo.username
    this.getTaskPercent();
    getCurrentLocation( (info) => {
      this.currentLocation = info;
    }, () => {
      Toast.fail("当前定位获取失败")
    } )
  },
  methods: {
    async getTaskPercent() {
      // 小区任务完成进度
      await communityTaskPercent( { VILLAGE_ID: this.communityId, IF_BDGGZ: this.ifBdggz} )
      .then( res => {
        if ( res.success ) {
          const data = res.result;
          console.log('---小区任务完成进度', data)
          data.ywswUnFinish = data.ywswAll - data.ywswFinish;
          data.ywlyUnFinish = data.ywlyAll - data.ywlyFinish;
          data.wysbUnFinish = data.wysbAll - data.wysbFinish;
          data.swlyUnFinish = data.swlyAll - data.swlyFinish;
          data.ywlyRhUnFinish = data.ywlyRhAll - data.ywlyRhFinish
          this.taskPercent = data;
          const signList = data.signList
          const responsibleList = data.responsibleList

          if (data.ywlyRhUnFinish + data.ywlyUnFinish + data.ywswUnFinish + data.wysbUnFinish + data.swlyUnFinish === 0 && data.wjdcFinish > 0) {
            this.finishFlag = true
          } else {
            this.finishFlag = false
          }

          for (const people in responsibleList) {
            if(responsibleList[people].toUpperCase() == this.userId.toUpperCase()) {
              this.isResponsible = true
            }
          }
          for(const index in signList) {
            const signData = signList[index]
            signData.signFlag = true
            const oaAcct = signData.oaAcct;
            if(oaAcct === this.userId) {
              this.signed = true
            }
            const posttype = signData.postType
            switch (posttype) {
              case '客户经理':
                this.signList.khjl.push(signData)
                break
              case '智家工程师':
                this.signList.zigcs.push(signData)
                break
              case '网络工程师':
                this.signList.wlgcs.push(signData)
                break
            }
          }

          if(this.signList.zigcs.length === 0) {
            this.signList.zigcs.push({
              signFlag: false
            })
          }
          if(this.signList.wlgcs.length === 0) {
            this.signList.wlgcs.push({
              signFlag: false
            })
          }
          if(this.signList.khjl.length === 0) {
            this.signList.khjl.push({
              signFlag: false
            })
          }
        }
      } )
    },
    viewTask(type) {
      console.log(type)
      const c = ['小区任务'];
      if ( type === 'swyw' ) {
        this.$router.push( {
          path: "/publicline/kdcs/community-swyw",
          query: {
            breadcrumb: c.concat(['室外移网测速']).join("/"),
            communityId: this.communityId
          }
        } )
      }
      if ( type === 'lyyw' ) {
        this.$router.push( {
          path: "/publicline/kdcs/community-ly-list",
          query: {
            breadcrumb: c.concat(['楼宇移网测速']).join("/"),
            communityId: this.communityId
          }
        } )
      }
      if ( type === 'wjdc' ) {
        this.$router.push( {
          path: "/publicline/kdcs/wjdc-list",
          query: {
            breadcrumb: c.concat(['问卷调查']).join("/"),
            communityId: this.communityId
          }
        } )
      }
      if ( type === 'wysb' ) {
        this.$router.push( {
          path: "/publicline/kdcs/wysb-build-list",
          query: {
            breadcrumb: c.concat(['无源设备巡检']).join("/"),
            communityId: this.communityId
          }
        } )
      }

      if ( type === 'swly' ) {
        this.$router.push( {
          path: "/publicline/kdcs/swly-build-list",
          query: {
            breadcrumb: c.concat(['商务楼宇列表']).join("/"),
            communityId: this.communityId
          }
        } )
      }
    },
    confirmTask() {
      this.confirmShow = true;
    },
    closeTask() {
      closeCommunityTask( {
        "LOCATION": this.currentLocation,
        "VILLAGE_ID": this.communityId,
        "IF_BDGGZ": this.ifBdggz
      } )
        .then( res => {
          if ( res.success ) {
            // 确认成功，小区任务结束
            Toast.success('确认成功');
            this.$router.replace( {
              path: "/publicline/kdcs/task"
            } )
          }
        } )
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;
}
.task-list {
  padding: 20px 0;
  min-height: 300px;

  .task-item {
    padding: 6px 16px;
    margin: 14px auto;
    display: flex;
    border: 1px solid #aaa;
    border-radius: 6px;
    width: 70%;
    justify-content: space-between;
    align-items: center;

    &.disabled {
      background: #F3F3F3;
      color: #666;
      border-color: #ccc;
    }

    .task-icon {
      width: 40px;
      height: 40px;
      text-align: left;
    }
    .task-name {
      flex: 1;
    }
    .task-percent {
      width: 100px;
      text-align: right;
    }
    &.task-combine-item {
      flex-direction: column;
      .task-item {
        padding: unset;
        width: 100%;
        margin: unset;
        border-top: unset;
        border-left: unset;
        border-right: unset;
        border-radius: 0;
        border-bottom: 1px solid #aaa;
        &:last-child {
          border-bottom: unset;
        }
      }
    }
  }
}
.community-work-signature {
  width: 80%;
  margin: 0 auto;

  .signature-btn {
    text-align: center;
    padding: 10px 10px;
    background: #0c85ff;
    color: #FFF;
    border-radius: 6px;

    &.disabled {
      background: #EEE;
      color: #777;
      border-color: #ccc;
    }
  }

  .signature-list {
    margin-top: 10px;
    padding: 2px 10px;
    font-size: 13px;
    background: #f8fbff;
    border-radius: 6px;
    color: #666;

    .list-item {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      .item-post {
        width: 88px;
      }
      .item-name {
        width: 50px;
      }
      .item-time {
        width: 150px;
      }
      .item-sign {
        text-align: right;

        &.signed {
          color: #0c85ff
        }
      }
    }
  }
}

.confirm-list {
  padding: 10px 10px;
  font-size: 13px;

  .confirm-item {
    margin-bottom: 6px;

    span {
      font-size: 14px;
      font-weight: bold;
      color: #f00;
    }
  }
}
</style>